
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .nav-item {
            transition: all 0.2s ease;
        }
        .nav-item:hover {
            transform: translateY(-2px);
        }
        .badge {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .active-tab {
            color: #2563eb;
        }
        .active-tab i {
            color: #2563eb;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 用户信息区 -->
    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-6 pt-12 pb-16 rounded-b-3xl">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://s.coze.cn/image/s8yxPtYjlt8/" class="user-avatar mr-4">
                <div class="text-white">
                    <div class="flex items-center">
                        <h2 class="text-xl font-bold mr-2">张小美</h2>
                        <span class="badge bg-yellow-400 text-gray-800">黄金会员</span>
                    </div>
                    <p class="text-sm opacity-90 mt-1">ID: 12345678</p>
                    <div class="flex mt-3 space-x-4">
                        <div class="text-center">
                            <p class="text-sm opacity-90">积分</p>
                            <p class="font-bold">1,280</p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm opacity-90">红包</p>
                            <p class="font-bold">5个</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 提现按钮 -->
            <button onclick="window.location.href='withdraw.html'" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full text-sm font-medium text-white transition-all duration-200 flex items-center">
                <i class="fas fa-wallet mr-2"></i>
                提现
            </button>
        </div>
    </div>

    <!-- 功能导航区 -->
    <div class="flex-1 px-6 -mt-8">
        <div class="bg-white rounded-xl shadow-md p-4 mb-4">
            <h3 class="text-lg font-semibold mb-4 text-gray-700">我的功能</h3>
            <div class="grid grid-cols-4 gap-4">
                <a href="user-info.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">资料</p>
                </a>
                <!-- <a href="user_points.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-purple-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-coins text-purple-500 text-xl"></i>
                    </div>
                    <p class="text-sm">积分</p>
                </a> -->
                <!-- <a href="user_coupons.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-gift text-red-500 text-xl"></i>
                    </div>
                    <p class="text-sm">红包</p>
                </a> -->
                <a href="user_vip.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-yellow-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-crown text-yellow-500 text-xl"></i>
                    </div>
                    <p class="text-sm">会员</p>
                </a>
                <a href="user_distribution.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-share-alt text-green-500 text-xl"></i>
                    </div>
                    <p class="text-sm">分销</p>
                </a>
                <a href="user_code.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-pink-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-heart text-pink-500 text-xl"></i>
                    </div>
                    <p class="text-sm">推荐码</p>
                </a>
                <a href="../aunt/member-center.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-exchange-alt text-blue-500 text-xl"></i>
                    </div>
                    <p class="text-sm">切换身份</p>
                </a>
                <!-- <a href="user_help.html" class="nav-item text-center">
                    <div class="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-question-circle text-gray-500 text-xl"></i>
                    </div>
                    <p class="text-sm">帮助</p>
                </a> -->
            </div>
        </div>

        <a href="../aunt/aunt-registration.html" class="flex bg-white rounded-xl shadow-md p-4 mb-4">
            <div class="text-center w-full">
                <div class="text-lg font-semibold mb-4 text-gray-700">马上入住</div>
                <div class="text-sm text-gray-500">立即入住，享受更多权益</div>
            </div>
        </a>

        <div class="bg-white rounded-xl shadow-md p-4 mb-4">
            <h3 class="text-lg font-semibold mb-4 text-gray-700">我的订单</h3>
            <div class="grid grid-cols-4 gap-4">
                <a href="order-list.html?status=1" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">待付款</p>
                </a>
                <a href="order-list.html?status=11" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">待签合同</p>
                </a>
                <a href="order-list.html?status=2" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">待服务</p>
                </a>
                <a href="order-list.html?status=3" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">待评价</p>
                </a>
                <a href="order-list.html?status=4" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">已完成</p>
                </a>
                <a href="order-list.html?status=5" class="nav-item text-center">
                    <div class="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-clipboard-list text-indigo-500 text-xl"></i>
                    </div>
                    <p class="text-sm">已取消</p>
                </a>
            </div>
        </div>

        <!-- 设置入口区 -->
        <div class="bg-white rounded-xl shadow-md p-4 mb-20">
            <h3 class="text-lg font-semibold mb-4 text-gray-700">系统设置</h3>
            <div class="space-y-3">
                <a href="user_settings.html" class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition">
                    <div class="flex items-center">
                        <i class="fas fa-cog text-gray-500 mr-3"></i>
                        <span>系统设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-sign-out-alt text-gray-500 mr-3"></i>
                        <span>退出登录</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="user-home.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-list text-lg mb-1"></i>
            <span>分类</span>
        </a>
        <a href="member-exclusive.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-crown text-lg mb-1"></i>
            <span>会员专享</span>
        </a>
        <a href="../class/business-school.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-graduation-cap text-lg mb-1"></i>
            <span>商学院</span>
        </a>
        <a href="user-profile.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>

</body>
</html>